{extend name="public/base" /}
{block name="head"}
<style type="text/css">
table{color:#666;}
.goods-image{width: 120px;height: 90px;float: left;margin-right: 10px;}
.market_price{text-decoration: line-through;}
.layui-table th,.layui-table td{text-align: center;}
.layui-table td.goodsInfo{text-align: left;}
</style>
{/block}
{block name="body"}
<div id="fuyun-app" class="fuyun-app">
  <div class="search-box">
    <div class="fuyun-title">
      <h5>筛选条件</h5>
    </div>
    <div class="search-content">
      <form action="{:Url('index')}" method="get">
        <div class="fuyun-form-item layui-inline">
          <label>用户名字</label>
          <input class="layui-input" type="text" name="username" placeholder="输入用户名字" value="{$Request.param.username}">
        </div>
        <div class="fuyun-form-item layui-inline" style="padding-top:18px;">
          <button class="layui-btn layui-btn-normal">搜索</button>
        </div>
      </form>
    </div>
  </div>

  <div class="content-box ">
    <div class="fuyun-title">
      <h5>用户列表</h5>
      <a href="{:Url('create')}" class="layui-btn fuyun-add-btn layui-btn-small layui-btn-normal add"><i class="fa fa-plus-square margin-right-5"></i>添加用户</a>
    </div>
    <div class="main-box">
      <div class="layui-form">
        <table class="layui-table layui-form">
          <thead>
            <tr>
              <th width="6%">id</th>
              <th width="20%">用户名</th>
              <th width="10%">权限组</th>
              <th width="6%">状态</th>
              <th width="15%">操作</th>
            </tr> 
          </thead>
          <tbody>
            {volist name="userList['data']" id="vo"}
              <tr data-id="{$vo.id}">
                <td>{$vo.id}</td>
                <td>{$vo.username}</td>
                <td><?=isset($userGroup[$vo['user_group_id']])?$userGroup[$vo['user_group_id']]:'--'?></td>
                <td class="status-{$vo.id}">
                  <?php if($vo['status']==1):?>
                    正常
                  <?php else: ?>
                    禁用
                  <?php endif ?>
                </td>
                <td>
                  <div class="layui-btn-group">
                    <a class="layui-btn layui-btn-normal layui-btn-small" href="{:Url('update',['id'=>$vo['id']])}">编辑</a>
                    <a class="layui-btn layui-btn-small"  onclick="changeStatus({$vo.id},0)">禁用</a>
                    <a class="layui-btn layui-btn-small layui-btn-danger" onclick="changeStatus({$vo.id},1)">取消禁用</a>
                    <!-- <button class="layui-btn fuyun-btn-del layui-btn-small btn-del-id" data-url="{:Url('deleteAll')}" data-confirm="确定删除该商品吗？" data-successtip="删除成功！" data-id="<?=$vo['id']?>" ><i class="fa fa-close margin-right-5"></i>删除</button> -->
                  </div>
                </td>
              </tr>
            {/volist}
          </tbody>
        </table>
      </div>
      <div class="page-box">
        <fuyun-page v-if="<?=ceil($userList['totalRow']/$userList['pageSize'])?> > 1"
          :pagesize="<?=$userList['pageSize']?>" 
          :total = "<?=$userList['totalRow']?>"
          :current-page = {$userList['curPage']}
        ></fuyun-page>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
    layui.use([ 'layer','form'], function(){
      var layer = layui.layer;
      var form = layui.form();
      //全选
      form.on('checkbox(allChoose)', function(data){
          var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
          child.each(function(index, item){
              item.checked = data.elem.checked;
          });
          form.render('checkbox');
      });
    });

    fuyun.components(['page'],{
      el:"#fuyun-app",
      data:{
        labelPosition: 'top',
      },
    });

    //单个上下架
    function changeStatus(id, status){
      requestStatus(id, status);
    }

    function requestStatus(id, status){
      var confirm = status==1 ? "是否取消禁用？":"是否禁用？";
      var layerDelIndex = layer.confirm(confirm, {
        btn: ['是','否'] //按钮
      }, function(){
        $.ajax({
          type:'post',
          url: "{:Url('changeStatus')}",
          data:{'id':id,'status':status},
          dataType:'json',
          success: function(data){
            changeStatusIcon(id, status);
            layer.msg(data['msg']);
            layer.close(layerDelIndex);
          }
        });
      }, function(){
        return;
      });
    }

    //改变状态图标
    function changeStatusIcon(id, status){
      var html_txt = status == 1 ? '正常':'禁用';
      $(".status-"+id).html(html_txt);
    }
    

</script>

{/block}
